<template>
  <div class="videolist">
    <div
      class="videolist-box"
      v-infinite-scroll="load"
      infinite-scroll-delay="300"
    >
      <div
        class="video-item"
        v-for="(item, index) of newVideolist.length !== 0
          ? newVideolist
          : videolist"
        :key="index"
      >
        <div class="video-image" @click="tovideoDetails(item.vid, item.id)">
          <div class="video-playCount">
            <span v-if="videomv !== 'MV'"
              ><i class="iconfont icon-luxiang2"></i
              >{{ item.playTime | playCount }}</span
            >
            <span v-else
              ><i class="iconfont icon-luxiang2"></i
              >{{ item.playCount | playCount }}</span
            >
          </div>
          <div class="video-time">
            <span>{{ item.durationms | playtime }}</span>
          </div>
          <img v-if="videomv !== 'MV'" :src="item.coverUrl" alt="" />
          <img v-else :src="item.coverUrl" alt="" />
        </div>
        <div class="video-name-box">
          <p :title="item.title" @click="tovideoDetails(item.vid, item.id)">
            {{ item.title }}
          </p>
          <p v-if="item.creator" :title="item.creator.nickname">
            {{ item.creator.nickname }}
          </p>
        </div>
        <div class="video-name-box" v-if="videomv == 'MV'">
          <p :title="item.name">
            <i
              v-if="item.relateSong !== null"
              :style="{ color: themeColor }"
              class="iconfont icon-MV"
            ></i>
            {{ item.name }}
          </p>
          <p :title="item.artists[0].name" @click="tovideoDetails(item.vid)">
            {{ item.artists[0].name }}
          </p>
        </div>
      </div>
    </div>
    <!-- <div class="msg" v-else>暂无推荐视频呀～～</div> -->
  </div>
</template>

<script>
import { getVideoAll, getVideogrouplist } from "@/api/video";
export default {
  name: "videolist",
  components: {},
  props: {},
  data() {
    return {
      videomv: "",
      offsetAll: 3, // 全部视频
      indexAll: 0, // 全部视频
      videolist: [], // 视频列表
      newVideolist: [], // 视频列表
      offsetGroup: 3, //分类视频
      indexGroup: 0 //分类视频
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    },
    tokenCookie() {
      return this.$store.state.tokenCookie;
    }
  },
  watch: {
    $route() {
      this.videolist = [];
      if (this.$route.query.id === undefined) {
        this.getVideoAll();
      }
      this.videomv = this.$route.query.cat;
      this.getVideogrouplist();
    }
  },
  created() {
    if (this.$route.query.id == undefined) {
      this.getVideoAll();
    }
    this.videomv = this.$route.query.cat;
  },
  mounted() {},
  methods: {
    // 获取视频
    async getVideoAll() {
      this.showLoading();
      for (let i = this.indexAll; i < this.offsetAll; i++) {
        const { data } = await getVideoAll({
          offset: i,
          cookie: this.tokenCookie.cookie
        });
        data.datas.forEach(val => {
          this.newVideolist.push(val.data);
        });
        if (data.code == 200) {
          this.closeLoading();
        }
      }
    }, // 获取分类视频
    async getVideogrouplist() {
      this.newVideolist = [];
      this.showLoading();
      for (let i = this.indexGroup; i < this.offsetGroup; i++) {
        const { data } = await getVideogrouplist({
          id: this.$route.query.id,
          offset: i,
          cookie: this.tokenCookie.cookie
        });
        data.datas.forEach(val => {
          this.videolist.push(val.data);
        });
        if (data.code == 200) {
          this.closeLoading();
          // this.msg = data.msg
        }
      }
    },
    load() {
      if (this.$route.query.id == undefined) {
        this.offsetAll += 3;
        this.indexAll += 3;
        this.getVideoAll();
      } else {
        this.offsetGroup += 3;
        this.indexGroup += 3;
        this.getVideogrouplist();
      }
    },
    tovideoDetails(id, mvid) {
      if (id === undefined) {
        this.$router.push({
          name: "mvdetails",
          query: {
            id: mvid
          }
        });
      } else {
        this.$router.push({
          name: "videodetails",
          query: {
            id
          }
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.videolist {
  margin-top: 1.875rem;
  margin-bottom: 6.25rem;
  .videolist-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .video-item {
      width: 25%;
      padding: 0.3125rem 0.625rem;
      box-sizing: border-box;
      .video-image {
        position: relative;
        width: 100%;
        height: 10.625rem;

        cursor: pointer;
        img {
          width: 100%;
          border-radius: 0.3125rem;
          height: 100%;
        }
        .video-playCount {
          position: absolute;
          top: 0;
          right: 0;
          color: #fff;
          font-size: 0.875rem;
          padding: 0.125rem 0.5rem;
          .icon-luxiang2 {
            font-size: 1.25rem;
            vertical-align: middle;
          }
        }
        .video-time {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 0.125rem 0.5rem;
          color: #fff;
        }
      }
      .video-name-box {
        margin-top: 0.3125rem;
        color: #555555;

        p {
          cursor: pointer;

          &:nth-child(1) {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          &:nth-child(1):hover {
            color: #000;
          }
          &:nth-child(2) {
            color: #ccc;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
          &:nth-child(2):hover {
            color: #aaaaaa;
          }
        }
        .icon-MV {
          vertical-align: middle;
          font-size: 1.375rem;
        }
      }
    }
  }
  .msg {
    width: 100%;
    text-align: center;
    padding: 6.25rem 0;
  }
}
</style>
